import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'

import { Table, Tag, Space, Divider, Button, Modal, message,Spin } from 'antd';
import { getAirInfoAction } from '../../store/airInfoStore/actionCreators'; 

//时间处理函数
import { TimeProcess } from '../../utils';
import { deleteAirInfo } from '../../services';
import { NavLink } from 'react-router-dom/cjs/react-router-dom';


export default memo(function AirMange() {
    const {airInfo} = useSelector(state => ({
      airInfo: state.getIn(["air", "airInfo"])
    }), shallowEqual)

    // console.log(airInfo);
    const [isVisable, setIsVisable] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [deleteAirId, setDeleteAirId] = useState({});
    const [isReload, setIsReload ] = useState(false);

    // console.log("空调信息界面");
    const dispatch = useDispatch();
    useEffect(() => {
      dispatch(getAirInfoAction());
      // console.log("空调信息");
    }, [dispatch, airInfo, isReload])
    
    const handleDelete = (text, record) => {
      // console.log(record);
      setDeleteAirId({air_id:record.air_id});
      setIsVisable(true)
    }
    
    const onOk = () => {
      // console.log('ok');
      setIsLoading(true);
      deleteAirInfo(deleteAirId).then(res => {
        setIsLoading(false);
        setIsVisable(false);

        if(res.status === 200)
        {
          message.success(res.message);
          setIsReload(!isReload);
        }else{
          message.error(res.message);
        }
      }).catch(err => {
        setIsLoading(false)
        setIsVisable(false)
        message.error(err)
      })
    }

    const onCancel = () => {
      setIsVisable(false)
    }

    const columns = [
        {
          title: '空调编号',
          dataIndex: 'air_number',
          key: 'air_number',
        },
        {
          title: '空调所在宿舍',
          dataIndex: 'room_number',
          key: 'room_number',
        },
        {
            title: '使用情况',
            dataIndex: 'use_condition',
            key: 'use_condition',
            render: condition => {
              let value = '未使用';
              let color = 'blue';
              if(condition == '1')
              {
                value = '使用中';
                color = 'green';
              }
              else if(condition == '0')
              {
                value = '维修中';
                color = 'red';
              }
              else
              {
                value = '未使用';
              }

              return (
                <>
                  <Tag color={color} key={value}>{value}</Tag>
                </>
              )
            }
          },
        {
          title: '维修次数',
          dataIndex: 'repair_times',
          key: 'repair_times',
        },
        {
          title: "最新维修时间",
          dataIndex: "latest_repair_date",
          key: "latest_repair_date",
          render:time => {
            let realTime = TimeProcess(time);
            return <div>{realTime}</div>
          }
          
        },
        {
          title: "操作",
          key: "action",
          render:(text, record) => {
            return (
              <>
                <Space size="middle">
                  <Button type="link">
                    <NavLink to={{
                      pathname:"/admin/modify_air_info",
                      query: {...record},
                      search: `?air_id=${record.air_id}`
                    }} exact>修改</NavLink>
                  </Button>
                  <Button type='link' onClick={e => handleDelete(text, record)}>删除</Button>
                </Space>
              </>
            )
          }
          
        }
        
      ];
    return (
        <div>
            <Divider orientation="left">空调信息管理</Divider>
            <Button type='link'><NavLink to="/admin/add_air_info" exact>添加空调信息</NavLink></Button>
            <div>
                <Table columns={columns} dataSource={airInfo} style={{minHeigh:"100%"}} pagination={{defaultPageSize:'8'}}/>
            </div>
            <Modal
              title="提示框"
              visible={isVisable}
              onOk={onOk}
              onCancel={onCancel}
              cancelText="取消"
              okText="确定"
            >
              <p>是否确认删除该条空调信息？</p>
              <Spin spinning={isLoading}/>
            </Modal>
        </div>
    )
})